<template>
  <div>
    <div class="background">
      <img alt="" height="100%" src="../../../public/img/background.jpg" width="100%"/>
    </div>
    <div class="front">
      <div class="login-box">
        <div class="login-box-body" style="border-radius: 20px">
          <div class="login-logo">
            <a><b>Depot仓储</b><br>后台管理系统</a>
          </div>
          <!-- /.login-logo -->
          <p class="login-box-msg">注册仓库实例</p>

          <div style="font-size: large;font-weight: bold;margin-bottom: 10px">新建管理员账户</div>
          <form action="" method="post">
            <div class="form-group has-feedback">
              <label for="username">管理员名称</label>
              <input class="form-control" id="username" name="username" placeholder="请输入管理员名称" type="text" v-model="username">
              <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
              <label for="password">管理员密码</label>
              <input class="form-control" id="password" name="password" placeholder="请输入管理员密码" type="password" v-model="password">
              <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
              <label for="confirmPassword">确认密码</label>
              <input class="form-control" id="confirmPassword" name="confirmPassword"
                     placeholder="请再次输入一遍相同的密码" type="password" v-model="confirmedPassword">
              <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
              <div class="col-xs-12">
                <button class="btn btn-primary btn-block btn-flat" @click="register" type="button">注册</button>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-12">
                <router-link to="/login" class="pull-left" style="margin-top: 10px">&lt; 返回登录页面</router-link>
              </div>
            </div>
          </form>

        </div>
        <!-- /.login-box-body -->
        <div>
          <p class="alert alert-danger hide" id="message" style="border-radius: 20px">message</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data(){
    return {
      username: "",
      password: "",
      confirmedPassword: ""
    }
  },
  methods:{
    register(){
      if(this.username===""){
        this.$message.warning("管理员名称不得为空");
      }else if(this.password==="") {
        this.$message.warning("管理员密码不得为空");
      }else if(this.confirmedPassword==="") {
        this.$message.warning("确认密码不得为空");
      }else if(this.password!==this.confirmedPassword) {
        this.$message.warning("两次输入的密码不一致");
      } else{
        this.GLOBAL.appData.userList.push({
          "id": this.GLOBAL.appData.userList[this.GLOBAL.appData.userList.length-1].id+1,
          "username": this.username,
          "password": this.password,
          "type": "admin"
        });
        this.$alert("注册成功，自动返回到登陆页面", '提示', {
          confirmButtonText: '确定',
          type: 'success'
        });
        $('.el-message-box').css('width','250px');
        this.$router.replace('/login');
      }
    }
  }
}
</script>

<style scoped>
.background{
  width:100%;
  height:100%;
  z-index:-1;
  position: absolute;
}
.front{
  z-index:1;
  position: absolute;
  left: 5vw;
  top: 5vh;
  width: 90vw;
  height: 90vh;
}
</style>
